<template>
  <div class="hh-login right">

    <div class="wdsc select">
      <div class="tp af">
        <div class="lf">
          <div class="mc" :style="'background:url(https://exam.zhonghaiqihang.com'+title.gr.avatar+') no-repeat 0 0/274px 265px'"></div>
          <img :src="'https://exam.zhonghaiqihang.com/'+title.gr.avatar" width="100px" height="100px" class="tx">
          <p class="nm">{{title.gr.username}}</p>
          <p class="zh">账号：{{title.gr.name}}</p>
        </div>
        <div class="rt">
          <h4>我的钱包 <a href="javascript:;" class="jftca"><span></span>积分规则</a></h4>
          <ul class="jf af">
            <li class="li1"><img src="~/assets/img/wdsc1.png">
              <p class="p1">{{title.sc.giveScore}}</p>
              <p class="p2">赠送积分</p>
            </li>
            <li class="li2"><img src="~/assets/img/wdsc2.png">
              <p class="p1">{{title.sc.totalScore}}</p>
              <p class="p2">累计积分</p>
            </li>
            <li class="li3"><img src="~/assets/img/wdsc3.png">
              <p class="p1">{{title.sc.useScore}}</p>
              <p class="p2">已使用积分</p>
            </li>
            <li class="li4"><img src="~/assets/img/wdsc4.png">
              <p class="p1">{{title.sc.surplusScore}}</p>
              <p class="p2">剩余积分</p>
            </li>
          </ul>

        </div>
      </div>
      <div class="wdsc2" >
        <h3>我的收藏</h3>
        <div class="ct">
          <h4>我收藏的广告位 </h4>
          <ul class="af" :class="title.sc.collectServiceRes?'':'select'">
            <li v-for="(data,id) in title.sc.collectServiceRes?title.sc.collectServiceRes.slice(sl3*9,(sl3+1)*9):[]"  :class="'li'+(id+1)" :key="id" style="margin: 20px 0 0 24px">
              <div>
                <h5>{{data.servicename}}</h5>
                <p class="p1">积分：<span>{{data.buyneedscore}}</span></p>
                <p class="p2 sc" @click="shouc(title.id,data.sid)">收藏</p>
              </div>
              <a href="javascript:;" @click="dkgm(data.uid,data.sid)">立即购买</a>
            </li>

          </ul>
          <div class="dbqh" :style="title.sc.collectServiceRes?'':'display:none'">
            <span>{{title.sc.countNum}}条</span><a href="javascript:;" @click="syy">上一页</a> <a href="javascript:;" v-for="(i,id) in sl2" @click="qh2(id)" :class="id==sl3?'select':''">{{i}}</a> <a href="javascript:;" @click="xyy">下一页</a>
          </div>
          <div class="wsc" :class="title.sc.collectServiceRes?'':'select'" >
            <img src="~/assets/img/wdsc-no.png" width="251px" height="177px">
            <p>还没有任何收藏呐！</p>
          </div>
          <!--<div class="wdsc">-->
            <!---->
          <!--</div>-->
        </div>
      </div>
      <div class="tc">
        <span>×</span>
        {{tcmsg}}
      </div>
      <div class="gmtc" :class="goumai.select==0?'':'select'">
        <div class="ct">
          <h3>{{goumai.title}}(展示位)</h3>
          <p class="p1"><span>{{goumai.jifen}}</span>积分</p>
          <p class="p2">{{goumai.title}}(展示位)</p>
          <p class="p3">当前拥有积分:{{goumai.userjf}}</p>
          <a href="javascript:;" class="ljgm" @click="gmjf(title.id,goumai.id)">立即购买</a>
          <a href="javascript:;" class="close" @click="gmgb()"></a>
        </div>
      </div>

      <div class="jfgztc">
        <div class="jfct">
          <div class="nr">
            <h4>积分规则说明</h4>
            <div>
              <h5 >一、积分获得 </h5>
              <p style="margin-top: 15px">1、首次登陆获得；</p>
              <p>（1）首次登录后完善个人信息，获赠200积分；</p>
              <p>（2）首次登陆未完善个人信息，之后填写完成个人信息，不再获赠200积分。</p>
              <p style="margin-top: 20px">2、按员工个人每月业绩达成比例获得；</p>
              <p>（1）每月业绩目标达成，超出目标业绩部分按5%计算积分；</p>
              <p>（2）每月业绩目标达成，完成目标业绩部分按3%计算积分；</p>
              <p>（3）每月业绩目标未达成，取得业绩按3%计算积分。</p>
              <p>注：积分计算保留到个位，小数点后省略。</p>
              <p class="p2" style="margin-top: 10px">例1：业绩目标达成，A员工入职满12个月，业绩为6万元（业绩目标为4万元），业绩目标部分获得积分为：<br>40000×3%＝1200积分；超出业绩目标部分为2万元，超出业绩目标部分获得积分为：20000×5%＝1000积分；因此，A员工应获得积分为：1200＋1000＝2200积分。<br/>
                例2：业绩目标未达成，B员工入职满12个月，业绩为3万元（业绩目标为4万元），B员工获得积分为：30000×3%＝900积分，因此，B员工应获得积分为：900积分。</p>
              <p style="margin-top: 18px">3、其他获得积分方式，突出贡献，获得积分100-1000积分。</p>
              <p>（1）提出合理、可行性建议或意见，利于公司长远发展；</p>
              <p>（2）推荐人才，推荐的人员入职后工作努力、敬业、积极向上、具有团队精神。</p>
            </div>
            <div>
              <h5 style="margin-top: 10px">二、积分扣除</h5>
              <p style="margin-top: 10px">1、业绩数据信息录入错误，一条信息录入错误扣除10积分，两条信息录入错误扣除20积分，以此类推，以信息修改记录为准；（同一条信息修改多次，只扣一次10积分）</p>
              <p>2、CC对话：（以下每项：每次扣除10积分）</p>
              <p>（1）漏接电话；</p>
              <p>（2）态度不友好；</p>
              <p>（3）不解答，直接要微信或电话。</p>
            </div>
            <div>
              <h5>三、积分使用</h5>
              <p style="margin-top: 15px">1、员工积分，可以累积，不清零，长期有效；</p>
              <p>2、员工积分不能兑换现金，不可转让；</p>
              <p>3、每月15日前系统按员工上月业绩金额兑换积分；</p>
              <p>4、购买展示位步骤：登陆服务者中心——点击我要购买——进入展示位商城——选择要购买的展示位——点击购买；</p>
              <p>5、每个展示位有效期为5天，购买成功后即刻生效，周末不顺延，无法取消或更换；</p>
              <p>6、一人可同时购买多个展示位。</p>
            </div>


          </div>
          <a href="javascript:;" class="close"></a>
        </div>

      </div>


    </div>

  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    props: ['foobar'],
    data () {
      return {
        title:null,
        id:'',
        sl2:[1],
        sl3:0,
        nihao:'你好呀',
        tcmsg:'',
        tcmsg1:['收藏成功',''],
        tcmsg2:'取消收藏成功',
        selenv:false,
        grzx:{
          bj:'编辑'
        },
        title:null,
        fuwu:1,
        shuju1:{
          one:0,
          two:0,
          three:0,
          four:0,
          five:0
        },
        goumai:{
          title:'',
          jifen:0,
          userjf:0,
          select:0,
          id:0
        }
      }
    },
    async asyncData ({req,params,query}){
    let a = req.headers.cookie;
    let cookie = '';
    if(a.indexOf('userinfoRes')!=-1){
      let b = a.split('userinfoRes=');
      let c = b[1].split(';');
      cookie = c[0];
    }
    let gr = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/userCenterIndexData?userid=`+cookie);
    let nh4 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/myCollectServiceData?userid=`+cookie);

    let data  = {gr:gr.data,sc:nh4.data,id:cookie};
    return { title: data}
  }
  ,
  mounted:function(){
      $('.left .div5 .li1').addClass('select');
      var nb =  Math.ceil(this.title.sc.countNum/9);
      for (let i=1;i<nb+1;i++){
        if(i>1){
          this.sl2.push(i);
        }
      }
      $(document).ready(function(){
        $('.jftca').click(function(){
          $('.jfgztc').addClass('select');
        });
        $('.jfgztc .close').click(function(){
          $('.jfgztc').removeClass('select');
        });

      });

    var _this = this;
    function setCookie(cname,cvalue,exdays)
    {
      var d = new Date();
      d.setTime(d.getTime()+(exdays*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    _this.$axios.get('https://exam.zhonghaiqihang.com/'+'/PInterface/UserCenter/userCenterIndexData',{
      params:{
        num:_this.title.id
      }
    })
      .then(function(response){
        if(response == 'go_signin'){
          setCookie('userinfoRes','',-1);
          _this.$router.push('/');

        }else if(response=='userid_error'){
          setCookie('userinfoRes','',-1);
          _this.$router.push('/');
        }else if(response=='serviceid_error'){
          setCookie('userinfoRes','',-1);
          window.open('/PersonalCenter/','_self');
        }else if(response == '收藏成功'){
          _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/serviceData?userid='+_this.title.id)
            .then(function(response){
            });
        }

      });



  },
  methods:{
    tzlj:function(e){
      // const new3 = this.$router.resolve({name: e});
      // window.open(new3.href,'_self');
      this.$router.push('/'+e);
    },
    tzlj1:function(e){
      // const new3 = this.$router.resolve({name: this.dhlj[e]});
      // window.open(new3.href,'_self');
      this.$router.push(e);
    },
    tc:function(e1,e2,e3){
      var d = new Date();
      d.setTime(d.getTime()+(e3*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = e1 + "=" + e2 + "; " + expires;
      this.$router.push('/');
    },
    xqymtz:function(e1,e2){
      let href = '/ServiceDetails/'+e1+'?name='+e2;
      window.open(href,'_blank');
    },zkss:function(){
      $('.searchs').toggleClass('select');
    },
    qh:function(e1,e2){
      if(e1==1){
        this.shuju1.one =e2;
      }else if(e1==2){
        this.shuju1.two =e2;
      }else if(e1==3){
        this.shuju1.three =e2;
      }else if(e1==4){
        this.shuju1.four =e2;
      }else if(e1==5){
        this.shuju1.five =e2;
      }
    },
    qh2:function(e){
      this.sl3= e;
    },
    gmgb:function(){

      this.goumai.select = 0;
    },
    dkgm:function(e1,e2){
      var _this = this;
      this.goumai.select = 1;
      _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/showNumBuyData',{
        params:{
          userid:e1,
          serviceid:e2
        }
      })
        .then(function(response){
          _this.goumai.title = response.data.servicename;
          _this.goumai.jifen = response.data.buyneedscore;
          _this.goumai.userjf = response.data.userscore;
          _this.goumai.id = e2;


        });

    },
    gmjf:function(e1,e2){
      var _this = this;
      var sj;
      sj = 'userid='+e1+'&serviceid='+e2;
      _this.$axios.post('/api'+'/PInterface/UserCenter/showNumBuyOperation',sj)
        .then(function(response){
          _this.goumai.select = 0;
          // alert(response.data);
          _this.tcmsg= response.data;
          $('.hh-login .tc').addClass('select');
          setTimeout(function(){
            //your codes
            window.location.reload()
          },800);


        });
    },
    syy:function(){
      if(this.sl3>0){
        this.sl3= this.sl3-1;
      }
    },
    xyy:function(){
      var nb =  Math.ceil(this.title.sc.countNum/9);
      if(this.sl3<nb-1){
        this.sl3= this.sl3+1;
      }
    },
    shouc:function(e1,e2){
      var _this = this;
      function setCookie(cname,cvalue,exdays)
      {
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
      }
      _this.$axios.post('api/PInterface/UserCenter/collectOperation','userid='+e1+'&serviceid='+e2
      )
        .then(function(response){
          // _this.xianqu = response.data;

          if(response.data == 'go_signin'){
            setCookie('userinfoRes','',-1);
            _this.$router.push('/');

          }else if(response.data=='userid_error'){
            setCookie('userinfoRes','',-1);
            _this.$router.push('/');
          }else if(response.data=='serviceid_error'){
            setCookie('userinfoRes','',-1);
            window.open('/PersonalCenter/','_self');
          }else if(response.data== '收藏成功'){
            _this.tcmsg= '收藏成功';
            $('.hh-login .tc').addClass('select');
            $('.tc').fadeIn(0);
            $('.tc').fadeOut(2500);
            _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/myCollectServiceData?userid='+_this.title.id)
              .then(function(response){
                _this.title.sc = response.data;

              });
          }else if(response.data== '取消收藏成功'){
            $('.hh-login .tc').addClass('select');
            _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/myCollectServiceData?userid='+_this.title.id)
              .then(function(response){
                _this.title.sc = response.data;
                _this.tcmsg= '取消收藏成功';
                $('.hh-login .tc').addClass('select');
                $('.tc').fadeIn(0);
                $('.tc').fadeOut(2500);
                // var test1 = setTimeout(function(){
                //   //your codes
                //   $('.hh-login .tc').removeClass('select');
                // },1000);
              });
          }

        });


    }
  }


  }
</script>

<style>

</style>
